"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Users, Shield, Key, MenuIcon, Settings, BarChart3, Home, ChevronLeft, ChevronRight } from "lucide-react"

const menuItems = [
  {
    title: "仪表盘",
    href: "/admin",
    icon: Home,
  },
  {
    title: "用户管理",
    href: "/admin/users",
    icon: Users,
  },
  {
    title: "角色管理",
    href: "/admin/roles",
    icon: Shield,
  },
  {
    title: "权限管理",
    href: "/admin/permissions",
    icon: Key,
  },
  {
    title: "菜单管理",
    href: "/admin/menus",
    icon: MenuIcon,
  },
  {
    title: "统计报表",
    href: "/admin/reports",
    icon: BarChart3,
  },
  {
    title: "系统设置",
    href: "/admin/settings",
    icon: Settings,
  },
]

interface SidebarProps {
  className?: string
}

export function AdminSidebar({ className }: SidebarProps) {
  const pathname = usePathname()
  const [collapsed, setCollapsed] = useState(false)

  return (
    <div className={cn("pb-12", className)}>
      <div className="space-y-4 py-4">
        <div className="my-0 mx-0 px-3 py-2 w-auto h-auto border-0 opacity-100 shadow-xs leading-9">
          <div className="flex items-center justify-between mb-4">
            <h2
              className={cn("text-lg font-semibold tracking-tight text-primary transition-all", collapsed && "sr-only")}
            >
              RBAC管理后台
            </h2>
            <Button variant="ghost" size="sm" onClick={() => setCollapsed(!collapsed)} className="h-8 w-8 p-0">
              {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
            </Button>
          </div>
          <div className="space-y-1">
            {menuItems.map((item) => (
              <Link key={item.href} href={item.href}>
                <Button
                  variant={pathname === item.href ? "secondary" : "ghost"}
                  className={cn("w-full justify-start leading-9", collapsed && "justify-center px-2")}
                >
                  <item.icon className="h-4 w-4" />
                  {!collapsed && <span className="ml-2">{item.title}</span>}
                </Button>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export function MobileSidebar() {
  const [open, setOpen] = useState(false)

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          variant="ghost"
          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
        >
          <MenuIcon className="h-6 w-6" />
          <span className="sr-only">切换菜单</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="pr-0">
        <AdminSidebar />
      </SheetContent>
    </Sheet>
  )
}
